﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Portal/Master/Portal.Master" AutoEventWireup="true"
    CodeBehind="ProductDetail.aspx.cs" Inherits="Besture.UI.Portal.Hotel.ProductDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="../../Resource/css/product.css" />
    <link rel="stylesheet" href="../../Resource/css/pager.css" />
    <link href="../../Resource/css/jcarousel.connected-carousels.css" rel="stylesheet" />
    <script type="text/javascript" src="../../Resource/js/jquery.pager.js"></script>
    <script type="text/javascript" src="../../Resource/js/jquery.jcarousel.min.js"></script>
    <script type="text/javascript" src="../../Resource/js/jquery.raty.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Kk3pzIO14j5D70xIQF30DDwS"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
    <div class="main container product_detail">
        <!--当前位置 -->
        <div class="current_position">
            <a href="../Home/Index.aspx">首页</a> > <a href="Product.aspx">酒店列表</a> > <span tag="<%=hotelID %>"></span>
        </div>
        <div class="layout_main fleft">
            <!--轮播-->
            <div class="connected-carousels">
                <div class="stage">
                    <div class="carousel carousel-stage">
                        <ul>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <li>
                                <img src="" width="506" height="382" /></li>
                            <%--<li>
                                <img src="../../Resource/images/main.png" width="506" height="382" /></li>
                            <li>
                                <img src="../../Resource/images/main.png" width="506" height="382" /></li>
                            <li>
                                <img src="../../Resource/images/main.png" width="506" height="382" /></li>
                            <li>
                                <img src="../../Resource/images/main.png" width="506" height="382" /></li>--%>
                        </ul>
                    </div>
                </div>
                <div class="navigation">
                    <a href="#" class="prev prev-navigation"></a><a href="#" class="next next-navigation">
                    </a>
                    <div class="carousel carousel-navigation">
                        <ul>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <li>
                                <img src="" width="120" height="90" /></li>
                            <%--<li>
                                <img src="../../Resource/images/main.png" width="120" height="90" /></li>
                            <li>
                                <img src="../../Resource/images/main.png" width="120" height="90" /></li>
                            <li>
                                <img src="../../Resource/images/main.png" width="120" height="90" /></li>
                            <li>
                                <img src="../../Resource/images/main.png" width="120" height="90" /></li>--%>
                        </ul>
                    </div>
                </div>
                <br class="clear" />
            </div>
            <!--酒店名称地址-->
            <div class="summary">
                <dl>
                    <dt></dt>
                    <dd>
                    </dd>
                    <dd>
                    </dd>
                </dl>
                <a href="javascript:CollectHotels(<%=hotelID%>);" class="fav">收藏</a>
                <div class="price">
                    <sub>￥</sub><span></span>起
                </div>
            </div>
            <!--选择房型-->
            <div class="part">
                <div class="title">
                    选择您喜欢的房型
                </div>
                <div class="selectbar">
                    <div class="date fleft">
                        <span>入住：</span>
                        <input id="dtbegin" type="text" class="date_input" value="<%=bt %>" />
                    </div>
                    <div class="date fleft">
                        <span>退房：</span>
                        <input id="dtend" type="text" class="date_input" value="<%=et %>" />
                    </div>
                    <a href="javascript:QueryRoomByHotelID(<%=hotelID%>);" class="fright">确&nbsp;认</a>
                    <br class="clear" />
                </div>
                <table id="tbRoom" cellpadding="0" cellspacing="0" border="0">
                    <!--标题
                    <tr>
                        <td>
                            房型
                        </td>
                        <td>
                            床型
                        </td>
                        <td>
                            早餐
                        </td>
                        <td>
                            宽带
                        </td>
                        <td>
                            房价
                        </td>
                        <td>
                            操作
                        </td>
                    </tr>-->
                </table>
            </div>
            <!--酒店详情-->
            <div class="part hotel_detail">
                <div class="title">
                    酒店详情
                </div>
                <div class="content">
                </div>
            </div>
            <!--用户评价-->
            <div class="part evaluate">
                <div class="title">
                    用户评价</div>
                <div class="rate">
                    <dl class="fleft" style="border: none;">
                        <dt></dt>
                        <dd>
                            好评度</dd>
                    </dl>
                    <%--<ul class="fleft">
                        <li>好评<span></span>100%</li>
                        <li>中评<span></span>0%</li>
                        <li>差评<span></span>0%</li>
                    </ul>--%>
                    <a href="javascript:ShowAppraisal()" class="fright">我要评论</a>
                    <br class="clear" />
                </div>
                <div class="user_evaluate">
                    <p>全部评论</p>
                    <div class="evContent"></div>
                    
                    <div id="pager"></div><br/>
                    <!--此处添加分页控件，样式已经写好-->
                    <%--<div class="pageList">
                        <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">
                            5</a> <a href="#">6</a>
                    </div>--%>
                </div>
                <div id="divUE" class="user_evaluate" style="display:none;">
                    <p>
                        发表评论
                    </p>
                    <div class="mycomment">
                        <ul>
                            <li>位置满意度：<span class="star"></span><i id="hint0"></i></li>
                            <li>设施满意度：<span class="star"></span><i id="hint1"></i></li>
                            <li>服务满意度：<span class="star"></span><i id="hint2"></i></li>
                            <li>卫生满意度：<span class="star"></span><i id="hint3"></i></li>
                        </ul>
                        <div class="item">
                            <a href="#" class="userimg">
                                <img src="<%=userImg %>"  style="width: 53px;"/><br />
                                <%=userLoginName%> </a>
                            <div class="text_area">
                                <img src="../../Resource/images/comment.gif" />
                                <textarea id="txtAppraisal" placeholder="顺便说点什么吧"></textarea>
                            </div>
                            <a href="javascript:HotelsAppraisal(<%=hotelID %>)" class="msg_btn">评&nbsp;论</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layout_side fright">
            <!--地图-->
            <div class="mapbox">
                <div id="map">
                </div>
                <div class="lookup">
                    <a href="javascript:ShowMap()">查看地图</a>
                </div>
            </div>
            <!--交通信息-->
            <div class="transport">
                <p>
                    交通信息
                </p>
            </div>
            <!--相关咨询-->
            <div class="qalist">
                <p>
                    相关咨询
                </p>
                <textarea id="txtAdvisory" placeholder="此处最多可以写300字"></textarea>
                <a href="javascript:AddAdvisoryByHotelID(<%=hotelID%>);" class="ask_btn">我要提问</a>
                <div class="qa_part">
                    <div class="title">
                        部分答案由会员提供，仅供参考
                    </div>
                </div>
            </div>
        </div>
        <br class="clear" />
        <!--地图弹窗-->
        <div class="mask">
        </div>
        <div class="popmapwrap">
            <div id="popmap" style="float: left; width: 780px;">
            </div>
            <div id="poplist" style="float: right; width: 200px; text-align: center;">
                <div style="background-color: White">
                    <input id="rdbtn1" type="radio" value="1" name="rdGroup" checked="checked" />公交
                    <input id="rdbtn2" type="radio" value="2" name="rdGroup" />驾车
                    <input id="rdbtn3" type="radio" value="3" name="rdGroup" />步行
                </div>
                <input id="txtMapStart" type="text" placeholder="出发地" style="height: 25px; width: 200px; margin-top: 5px;" />
                <input id="txtMapEnd" type="text" placeholder="目的地" style="height: 25px; width: 200px; margin-top: 5px;" />
                <input id="mapSearch" type="button" value="搜索" style="width: 60px; height: 22px; margin-top: 5px;"/>
                <div id="mapResult" style=" height:325px; margin-top:5px; background-color:White; overflow-y:scroll;"></div>
            </div>
        </div>
    </div>
    <script type="text/x-mustache" id="t3">
        {{#items}}
            <dl>
                <dt>{{Location}}</dt>
                <dd>{{GettingThere}}</dd>
            </dl>
        {{/items}}
    </script>
    <script type="text/x-mustache" id="t4">
        {{#items}}
            <dl>
                <dt>Q:{{Content}}<span>{{NickName}} | {{AskTime}}</span></dt>
                <dd>
                    A:{{Reply}}<span>{{ReplyName}} | {{ReplyTime}}</span>
                </dd>
            </dl>
        {{/items}}
    </script>
    <script type="text/javascript">
        var pc = 0; var pn = 1; var addr = "";

        $(document).ready(function () {
            $(".date_input").date_input();
            $(".star").each(function (i) {
                $(this).raty({
                    starOff: '../../Resource/images/off.png',
                    starOn: '../../Resource/images/on.png',
                    target: "#hint" + i,
                    hints: ['不满意', '一般', '中等', '满意', '非常满意'],
                    targetKeep: true
                });
            });

            $.ajax({
                type: "POST",
                url: "ProductDetail.aspx/GetHotelsByID",
                data: "{'hotelid':" + $(".current_position span").attr("tag") + "}",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d != "") {
                        var dataObj = eval("(" + msg.d + ")");
                        $(".current_position span").html(dataObj[0].items[0].HotelsName);
                        $(".summary dl dt").html(dataObj[0].items[0].HotelsName);
                        $(".summary dl dd").eq(0).html(dataObj[0].items[0].Address);
                        $(".summary dl dd").eq(1).html(dataObj[0].items[0].Tel);
                        $(".content").append(dataObj[0].items[0].Detail);
                        $(".content").append(dataObj[0].items[0].NetworkFacilities);
                        $(".content").append(dataObj[0].items[0].ParkingLot);
                        $(".content").append(dataObj[0].items[0].HotelFacilities);
                        $(".transport").append(Mustache.render($("#t3").html(), dataObj[2]));
                        $(".qa_part").append(Mustache.render($("#t4").html(), dataObj[3]));

                        $(".carousel-stage > ul > li:gt(" + (dataObj[1].items.length - 1) + ")").remove();
                        $(".carousel-navigation > ul > li:gt(" + (dataObj[1].items.length - 1) + ")").remove();
                        $.getScript("../../Resource/js/jcarousel.connected-carousels.js");
                        for (var i = 0; i < dataObj[1].items.length; i++) {
                            $(".carousel-stage > ul > li:eq(" + i + ") > img").attr("src", "" + dataObj[1].items[i].ImageUrl);
                            $(".carousel-navigation > ul > li:eq(" + i + ") > img").attr("src", ""+ dataObj[1].items[i].ImageUrl);
                        }

                        addr = dataObj[0].items[0].Address;
                        ShowMainMap();
                    }

                    QueryRoomByHotelID($(".current_position span").attr("tag"));
                    GetAppraisalByHotelID(1);
                }
            });
        });

        function QueryRoomByHotelID(hotelid) {
            var dtbegin = $("#dtbegin").val();
            var dtend = $("#dtend").val();

            var d1 = new Date(dtbegin.replace(/\-/g, "\/"));
            var d2 = new Date(dtend.replace(/\-/g, "\/"));
            var dayspan = (d2 - d1) / 24 / 3600 / 1000;
            if (d1 >= d2) {
                alert("结束时间必须大于开始时间！");
                return;
            }
            if (dayspan > 20) {
                alert("时间跨度不能超过20天！");
                return;
            }

            $.ajax({
                type: "POST",
                url: "ProductDetail.aspx/GetRoomByHotelID",
                data: "{'hotelid':" + hotelid + ",'begintime':'" + dtbegin + "','endtime':'" + dtend + "'}",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d != "") {
                        $(".price span").html(msg.d.split(",")[0]);
                        $("#tbRoom").html("<tr><td>房型</td><td>床型</td><td>早餐</td><td>宽带</td><td>房价</td><td>操作</td></tr>");
                        $("#tbRoom").append(msg.d.split(",")[1]);
                    }
                    $(".part>table").each(function () {
                        //隔行换色
                        $("tr:even", this).css("background-color", "#f7f7f7").not(":first").children("td").addClass("tdborder").end().hide();
                        $("tr:odd", this).each(function () {
                            $(this).children("td").last().addClass("tdborder").end().first().addClass("tdborder").click(function () {
                                $(this).parent().next().show();
                            });
                        });
                    });
                    //收起详细信息
                    $(".slideup").click(function () {
                        $(this).parents("tr").hide();
                        return false;
                    });
                }
            });
        }

        function RedirectPay(id) {
            var dtbegin = $("#dtbegin").val();
            var dtend = $("#dtend").val();
            window.location.href = "../Pay/OrderInfo.aspx?ud=" + id + "/" + dtbegin + "/" + dtend;
        }

        function CollectHotels(id) {
            $.ajax({
                type: "POST",
                url: "Product.aspx/CollectHotels",
                data: "{ 'hotelid': " + id + "}",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d == 1) {
                        alert("收藏成功！");
                    } else if (msg.d == 0) {
                        alert("请先登录！");
                        window.location.href = "../UserCenter/Login.aspx";
                    } else {
                        alert("收藏失败！");
                    }
                }
            });
        }

        function AddAdvisoryByHotelID(id) {
            if ($("#txtAdvisory").val() != "") {
                $.ajax({
                    type: "POST",
                    url: "ProductDetail.aspx/AddAdvisoryByHotelID",
                    data: "{ 'hotelid': " + id + ",'content':'" + $("#txtAdvisory").val() + "'}",
                    contentType: "application/json",
                    success: function (msg) {
                        if (msg.d == 1) {
                            alert("提交成功，请耐心等待管理员审核！");
                        } else if (msg.d == 0) {
                            alert("请先登录！");
                            window.location.href = "../UserCenter/Login.aspx";
                        } else {
                            alert("提交失败！");
                        }
                    }
                });
            } else {
                alert("请输入咨询内容！");
            }
        }

        function GetAppraisalByHotelID(pi) {
            $.ajax({
                type: "POST",
                url: "ProductDetail.aspx/GetAppraisalByHotelID",
                data: "{ 'hotelid': " + $(".current_position span").attr("tag") + ",'pageindex':" + pi + "}",
                contentType: "application/json",
                success: function (msg) {
                    var index;
                    index = msg.d.indexOf(",");
                    $(".rate dl dt").html(msg.d.substring(0, index));
                    msg.d = msg.d.substring(index + 1);
                    index = msg.d.indexOf(",");
                    var pc = msg.d.substring(0, index);
                    $(".evContent").html(msg.d.substring(index + 1));
                    if (pc > 0) {
                        $("#pager").css("display", "block");
                        $("#pager").pager({ pagenumber: pn, pagecount: pc, buttonClickCallback: PageClick });
                    } else {
                        $("#pager").css("display", "none");
                    }
                    $(".replybox > a").click(function () {
                        $(this).next().slideDown();
                        return false;
                    });
                }
            });
        }

        function HotelsAppraisal(id) {
            if ($("#txtAppraisal").val() != "") {
                $.ajax({
                    type: "POST",
                    url: "ProductDetail.aspx/HotelsAppraisal",
                    data: "{ 'hotelid': " + id + ",'location':'" + $("#hint0").text() + "','facilities':'" + $("#hint1").text() + "','service':'" + $("#hint2").text() + "','health':'" + $("#hint3").text() + "','content':'" + $("#txtAppraisal").val() + "'}",
                    contentType: "application/json",
                    success: function (msg) {
                        if (msg.d == 1) {
                            alert("评价成功，请耐心等待管理员审核！");
                        } else if (msg.d == 0) {
                            alert("请先登录！");
                            window.location.href = "../UserCenter/Login.aspx";
                        } else {
                            alert("评价失败！");
                        }
                    }
                });
            } else {
                alert("请输入评论内容！");
            }
        }

        function PageClick(pageclickednumber) {
            pn = pageclickednumber;
            GetAppraisalByHotelID(pn);
            $("#pager").pager({ pagenumber: pn, pagecount: pc, buttonClickCallback: PageClick });
        }

        function ReplyAppraisal(id) {
            var reg = /^[0-9A-Za-z\u4E00-\u9FA5]+$/;
            if (reg.test($("#txt" + id).val())) {
                $.ajax({
                    type: "POST",
                    url: "ProductDetail.aspx/ReplyAppraisal",
                    data: "{ 'appaisalid': " + id + ",'content':'" + $("#txt" + id).val() + "'}",
                    contentType: "application/json",
                    success: function (msg) {
                        if (msg.d == 0) {
                            alert("超时，请重新登录！");
                            window.location.href = "../UserCenter/Login.aspx";
                        } else if (msg.d == -1) {
                            alert("回复失败！");
                        } else {
                            $("#rl" + id).append(msg.d);
                        }
                    }
                });
            } else {
                alert("只能输入汉字、字母和数字！");
            }
        }

        function ShowAppraisal() {
            $("#divUE").css("display", "block");
        }

        function ShowMainMap() {
            var maptemp = new BMap.Map("map");
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint(addr, function (point) {
                if (point) {
                    maptemp.centerAndZoom(point, 16);
                    maptemp.enableScrollWheelZoom();
                    var marker = new BMap.Marker(point);
                    maptemp.addOverlay(marker);
                }
            }, "上海市");
        }

        function ShowMap() {
            $(".mask").height($(document).height()).show();
            $(".popmapwrap").show();
            map = new BMap.Map("popmap");
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint(addr, function (point) {
                if (point) {
                    $("#txtMapEnd").val(addr)
                    map.centerAndZoom(point, 16);
                    map.enableScrollWheelZoom();
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                }
            }, "上海市");
        }

        //关闭弹窗
        $(".mask").click(function () {
            $(".popmapwrap").hide();
            $(this).hide();
        });

        $("#mapSearch").click(function () {
            if ($("#txtMapStart").val() != "" && $("#txtMapEnd").val() != "") {
                var n = $("input[name='rdGroup']:checked").val();
                if (n == 1) {
                    var transit = new BMap.TransitRoute(map, {
                        renderOptions: { map: map, panel: "mapResult" }
                    });
                    transit.search($("#txtMapStart").val(), $("#txtMapEnd").val());
                } else if (n == 2) {
                    var driving = new BMap.DrivingRoute(map, {
                        renderOptions: { map: map, panel: "mapResult", autoViewport: true }
                    });
                    driving.search($("#txtMapStart").val(), $("#txtMapEnd").val());
                } else {
                    var walking = new BMap.WalkingRoute(map, {
                        renderOptions: { map: map, panel: "mapResult", autoViewport: true }
                    });
                    walking.search($("#txtMapStart").val(), $("#txtMapEnd").val());
                }
            } else {
                alert("请输入出发地和目的地！");
            }
        });
    </script>
</asp:Content>
